<template>
  <div>
    <x-course-list 
      :list="list" :total="total" :loading="isLoading" pagination
      :current-page.sync="searchForm.currentPage" :page-size.sync="searchForm.pageSize" 
      class="mt20" @change="getList">
      <template #nav>
        <el-breadcrumb separator="/" class="course-list-breadcrumb">
          <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>我的收藏</el-breadcrumb-item>
        </el-breadcrumb>
      </template>
    </x-course-list>
  </div>
</template>

<script>
export default {
  name: 'myCollect',
  data() {
    return {
      searchForm: {
        collectFlag: 2,
        currentPage: 1,
        pageSize: 9,
      },
      list: [],
      total: 0,
      isLoading: false,
    };
  },
  methods: {
    async getList (page) {
      this.isLoading = true
      if (page === 1) this.searchForm.currentPage = 1;
      this.searchForm.userId = sessionStorage.userId;
      const { data, total } = await this.Request.getCourseInfoPage({ params: this.searchForm })
      this.list = data;
      this.total = total;
      this.isLoading = false
    },
  },
  watch: {
    '$route.query': {
      handler(newValue, oldValue) {
        this.getList(1)
      },
      deep: true
    }
  },
  mounted() {
    this.getList(1)
  }
};
</script>

<style lang="scss" scoped>
@import "@/css/variable.scss";
.search-list-total-result {
  font-size: 30px;
  font-weight: 500;
  color: $white5;
  span {
    color: $blue6;
  }
}
</style>
